<template>
	<div>
		<el-row>
			<el-form class="demo-ruleForm">
				<el-col :span="2">
					<el-button type="primary" @click="addFormVisible = true">新增</el-button>
				</el-col>
				<el-col :span="2">
					<el-button @click="UserList">刷新</el-button>
				</el-col>
			</el-form>
		</el-row>
		<el-row>
			<el-table :data="tableData" style="width: 100%" :height="780">
				<el-table-column label="手机号" prop="mobile"></el-table-column>
				<el-table-column label="预约商品" prop="itemCode"></el-table-column>
				<el-table-column label="省份" prop="provinceName"></el-table-column>
				<el-table-column label="城市" prop="cityName"></el-table-column>
				<el-table-column label="创建时间" prop="createTime">
					<template slot-scope="scope">{{ scope.row.createTime | dateYMDHMSFormat }}</template>
				</el-table-column>
				<el-table-column label="授权到期时间" prop="expireTime">
					<template slot-scope="scope">{{ scope.row.expireTime | dateYMDHMSFormat }}</template>
				</el-table-column>
				<el-table-column align="right" width="300">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" @click="handleOrder(scope.$index, scope.row)">预约</el-button>
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<el-row>
			<el-pagination background :current-page="params.pageIndex" :page-size="params.pageSize" layout="prev, pager, next" :total="total" :pager-count="5" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
		</el-row>

		<el-dialog title="添加/更新用户" :visible.sync="addFormVisible" width="450px">
			<el-form ref="addForm" :model="addForm" label-width="80px">
				<el-form-item label="手机号">
					<el-col :span="22">
						<el-input v-model="addForm.mobile"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="验证码">
					<el-col :span="11">
						<el-input v-model="addForm.authcode"></el-input>
					</el-col>
					<el-col :span="11">
						<el-button type="primary" :disabled="!!countdownTimer" :loading="codeLoading" @click="sendCode">
							<span v-if="!countdownTimer">发送验证码</span>
							<span v-else>已发送 {{ countdownTime }} s</span>
						</el-button>
					</el-col>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addUser">提交</el-button>
			</div>
		</el-dialog>

		<el-dialog title="编辑" :visible.sync="editFormVisible" width="450px">
			<el-form ref="editForm" :model="editForm" :rules="rules" label-width="80px">
				<el-form-item label="预约商品" prop="itemCode">
					<el-col :span="22">
						<el-select v-model="editForm.itemCode" multiple>
							<el-option :label="item.title" :value="item.itemCode" v-for="item in productSelect" :key="item.itemCode"></el-option>
						</el-select>
					</el-col>
				</el-form-item>
				<el-form-item label="预约类型" prop="shopType">
					<el-col :span="22">
						<el-select v-model="editForm.shopType">
							<el-option label="本市最大" value="1"></el-option>
							<el-option label="离我最近" value="2"></el-option>
						</el-select>
					</el-col>
				</el-form-item>
				<el-form-item label="省份" prop="provinceName">
					<el-col :span="22">
						<el-select filterable v-model="editForm.provinceName" @change="CitySelect"><el-option :label="item" :value="item" v-for="item in provinceSelect" :key="item"></el-option></el-select>
					</el-col>
				</el-form-item>
				<el-form-item label="城市" prop="cityName">
					<el-col :span="22">
						<el-select filterable v-model="editForm.cityName"><el-option :label="item" :value="item" v-for="item in citySelect" :key="item"></el-option></el-select>
					</el-col>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="editUser('editForm')">提交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import request from '@/utils/request';
export default {
	data() {
		return {
			tableData: [],
			total: 0,
			params: {
				pageIndex: 1,
				pageSize: 10,
			},

			search: '',
			addFormVisible: false,
			editFormVisible: false,
			addForm: {
				mobile: '',
				authcode: '',
			},
			editForm: {
				mobile: '',
				itemCode: '',
				shopType: '1',
				provinceName: '',
				cityName: '',
			},
			productSelect: [],
			provinceSelect: [],
			citySelect: [],
			// 加载状态
			codeLoading: false,
			// 验证码倒计时时间
			countdownTime: 30,
			// 验证码倒计时定时器
			countdownTimer: null,
			rules: {
				itemCode: {required: true, message: '请选择', trigger: 'blur'},
				shopType: {required: true, message: '请选择', trigger: 'blur'},
				provinceName: {required: true, message: '请选择', trigger: 'blur'},
				cityName: {required: true, message: '请选择', trigger: 'blur'},
			},
		};
	},
	created() {
		this.UserList();
		this.ProductList();
		this.ProvinceSelect();
	},
	methods: {
		UserList() {
			var that = this;
			var data = this.params;
			request({
				url: '/api/main/userlist',
				method: 'post',
				data,
			})
				.then((result) => {
					var data = result.data.data;
					that.tableData = data.data;
					that.total = data.total;
					// console.log(that.tableData);
				})
				.catch((err) => {
					console.log(err);
				});
		},
		ProductList() {
			request({
				url: '/api/main/ProductList',
				method: 'post',
				data: {
					pageIndex: 1,
					pageSize: 100,
				},
			})
				.then((res) => {
					// console.log(res.data.data.data);
					this.productSelect = res.data.data.data;
				})
				.catch((e) => {
					this.$message.error(e.message);
					return;
				});
		},
		ProvinceSelect() {
			request({
				url: '/api/main/ProvinceSelect',
				method: 'get',
			})
				.then((res) => {
					// console.log(res.data.data);
					this.provinceSelect = res.data.data;
				})
				.catch((e) => {
					this.$message.error(e.message);
					return;
				});
		},
		CitySelect() {
			request({
				url: '/api/main/CitySelect',
				method: 'get',
				data: {
					province: this.editForm.provinceName,
				},
			})
				.then((res) => {
					// console.log(res.data.data);
					this.citySelect = res.data.data;
				})
				.catch((e) => {
					this.$message.error(e.message);
					return;
				});
		},
		handleOrder(index, row) {
			console.log(index);
			request({
				url: '/api/main/ReservationBatch',
				method: 'get',
				data: {mobile: row.mobile},
			})
				.then((res) => {
					if (res.data.statusCode == 200) {
						this.$message.success(res.data.data);
					} else {
						this.$message.error(res.data.errors);
					}
				})
				.catch((e) => {
					this.$message.error(e.message);
					return;
				});
		},
		handleEdit(index, row) {
			this.editFormVisible = true;
			this.editForm.mobile = row.mobile;
			console.log(index, row);
		},
		handleDelete(index, row) {
			console.log(index);
			request({
				url: '/api/main/Delete',
				method: 'get',
				data: {mobile: row.mobile},
			})
				.then((res) => {
					if (res.data.statusCode == 200) {
						this.$message.success('删除成功');
						this.UserList();
					} else {
						this.$message.error(res.data.errors);
					}
				})
				.catch((e) => {
					this.$message.error(e.message);
					return;
				});
		},
		handleSizeChange() {
			console.log('handleSizeChange');
		},
		handleCurrentChange(val) {
			this.params.pageIndex = val;
			this.ShopList();
			console.log(val);
		},
		addUser() {
			request({
				url: '/api/main/login',
				method: 'get',
				data: {phone: this.addForm.mobile, code: this.addForm.authcode},
			})
				.then((res) => {
					// console.log(res);
					if (res.data.statusCode == 200) {
						this.$message.success('更新成功');
						this.addFormVisible = false;
						this.UserList();
					} else {
						this.$message.error(res.data.errors);
					}
				})
				.catch((e) => {
					this.$message.error(e.message);
					return;
				});
		},
		editUser(formName) {
			this.$refs[formName].validate((valid) => {
				if (!valid) {
					return;
				}
			});

			request({
				url: '/api/main/update',
				method: 'post',
				data: this.editForm,
			})
				.then((res) => {
					// console.log(res);
					if (res.data.statusCode == 200) {
						this.$message.success('更新成功');
						this.editFormVisible = false;
						this.UserList();
					} else {
						this.$message.error(res.data.errors);
					}
				})
				.catch((e) => {
					this.$message.error(e.message);
					return;
				});
		},
		sendCode() {
			this.codeLoading = false;
			this.startCountdownTimer();
			request({
				url: '/api/main/SendCode/' + this.addForm.mobile,
				method: 'get',
			})
				.then(() => {
					setTimeout(() => {
						this.$message.success('短信验证码发送成功, 请注意查收!');
					}, 1000);
				})
				.catch((e) => {
					this.$message.error(e.message);
					return;
				});
		},
		/* 开始对按钮进行倒计时 */
		startCountdownTimer() {
			this.countdownTime = 30;
			this.countdownTimer = setInterval(() => {
				if (this.countdownTime <= 1) {
					clearInterval(this.countdownTimer);
					this.countdownTimer = null;
				}
				this.countdownTime--;
			}, 1000);
		},
	},
};
</script>
<style scoped>
[class*='el-col-'] {
	padding: 10px;
}
</style>
